前端调试方法论
调试的基本思路
发现问题 → 复现问题 → 定位原因 → 修复验证 → 回归测试
text
Chrome DevTools核心面板
| 面板 | 用途 | 常用操作 |
|---|---|---|
| Elements | 检查DOM和CSS | 修改样式实时预览 |
| Console | 查看日志和错误 | console.log调试 |
| Sources | 断点调试 | 设置断点、单步执行 |
| Network | 查看网络请求 | 检查API响应、加载性能 |
| Performance | 性能分析 | 录制性能火焰图 |
| Application | 存储和缓存 | 查看LocalStorage、Cookie |
断点调试技巧
- 条件断点：右键行号设置条件表达式，只在满足条件时暂停
- 日志断点：不暂停执行，只输出日志信息
- DOM断点：当DOM节点被修改时暂停
- XHR断点：当特定URL的请求发出时暂停
Vue DevTools
Vue项目必备的浏览器扩展，功能包括：
- 组件树查看和搜索
- 组件状态（props/data/computed）实时查看和修改
- Pinia状态管理查看
- 路由信息查看
- 性能分析
网络请求调试
重点检查：
- 请求URL和HTTP方法是否正确
- 请求参数是否符合接口文档
- 响应状态码和数据格式
- 请求耗时（定位慢接口）
↑